<template>
	<div class="my-exception">
		<div class="my-exception__img tc">
			<img :src="img" alt="" />
		</div>

		<div class="my-exception__desc" v-if="description">
			{{ description }}
		</div>

		<div class="my-exception__actions">
			<slot name="actions"> {{ time }}秒后自动<span class="pointer" @click.prevent="backHome">返回</span>首页 </slot>
		</div>
	</div>
</template>

<script setup name="myException">
/**
 * 异常页面
 * @module extensions/my-exception
 */
/**
 * 插槽
 * @member slots
 * @property {string} actions 操作栏
 */
/**
 * 属性参数
 * @property {String} [img] 左侧显示的图片
 * @property {String} [text] 显示的报错码
 * @property {String} [description] 显示的报错码对应的详细内容
 */
defineProps({
	img: {
		type: String
	},
	text: {
		type: String
	},
	description: {
		type: String
	}
});
const time = ref(3);
function backHome() {
	location.href = location.origin;
}
function setTimeout_backHome() {
	setTimeout(() => {
		if (time.value < 1) {
			backHome();
		} else {
			time.value--;
			setTimeout_backHome();
		}
	}, 1000);
}
// 初始化执行
setTimeout_backHome();
</script>

<style lang="scss" scoped>
.my-exception {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;

	&__img {
		img {
			width: 50%;
		}
	}

	&__desc {
		margin: 40px 0 20px;
		font-size: 20px;
		line-height: 28px;
		text-align: center;
	}

	&__actions {
		font-size: 16px;
		text-align: center;

		.pointer {
			margin: 0 5px;
			color: var(--el-color-primary);
		}
	}
}
</style>
